<script lang="ts" setup>
import HomeRequest from '@/request/homeRequest';
import { useAppStore } from '@/store';
import { navigate } from '@/utils/navigate';
import to from '@/utils/to';
import zPaging from 'z-paging/components/z-paging/z-paging.vue';

interface IState {
  params: {
    pageNo: number;
    pageSize: number;
    name: string;
    queryType: number;
    btnId: number;
    beeperId: number;
  };
  productList: IProductInformation[];
}

const store = useAppStore();
const state = reactive<IState>({ params: { name: '', pageNo: 1, pageSize: 10, queryType: store.$state.beeperParams.queryType, btnId: 0, beeperId: store.$state.beeperId }, productList: [] });
const pagingRef = ref<InstanceType<typeof zPaging> | null>(null);

onLoad((options) => {
  if (!options) return;
  pagingRef.value?.complete([]);
  state.params = { ...state.params, name: options.searchText, btnId: JSON.parse(options.data).id };
  fetchProductList(1);
});

// 获得产品列表
const fetchProductList = async (pageNo: number) => {
  const [err, res] = await to(HomeRequest.SearchAllProducts({ ...state.params, pageNo, hasLoading: true }));
  if (err) return;
  if (err) {
    pagingRef.value.complete(false);
    return;
  }
  pagingRef.value.complete(res.data.list);
};
</script>
<template>
  <view class="c-bg" :style="{ paddingTop: `${store.$state.menuInfo.top}px`, height: store.$state.menuInfo.height + 8 + 'px', paddingRight: store.$state.menuInfo.width + 12 + 'px' }">
    <view class="w-full flex items-center justify-between" :style="{ height: 'calc(100% - 8px)' }">
      <i class="i-mingcute:left-fill text-[28px]" @click="navigate({ type: 'navigateBack', url: '' })" />
      <view class="flex-1 ml-[8px]">
        <van-search :value="state.params.name" shape="round" placeholder="请输入产品关键词" @change="state.params.name = $event.detail" @close="pagingRef.reload()" @search="pagingRef.reload()" />
      </view>
    </view>
  </view>
  <view class="w-screen bg-white px-4px py-4px box-border" :style="{ height: `calc(100vh - ${store.headerHeight}px)` }">
    <z-paging ref="pagingRef" v-model="state.productList" :auto="false" @query="fetchProductList" empty-view-text="暂无数据" :auto-height="false" :fixed="false" safe-area-inset-bottom use-safe-area-placeholder>
      <Product v-for="_item in state.productList" :key="_item.id" :data="_item" :path="'home'" styles="list" />
    </z-paging>
  </view>
</template>
<style scoped lang="scss">
:deep(.van-search) {
  padding: 0 !important;
  background: transparent !important;
}
</style>
